<template>
  <!-- 机票首页 -->
  <section class="container">
    <!-- 1.国内机票 -->
    <h2 class="air-title">
      <i class="iconfont iconfeiji"></i>
      <span>国内机票</span>
    </h2>

    <!-- 2.机票搜索 -->
    <el-row type="flex" justify="space-between">
      <!-- 搜索表单 -->
      <div>
        <searchPage></searchPage>
      </div>

      <!-- 广告图 -->
      <div class="sale-banner">
        <img src="http://157.122.54.189:9093/images/pic_sale.jpeg" alt />
      </div>
    </el-row>

    <!-- 3.三列广告 -->
    <el-row type="flex" class="statement">
      <!-- 航协认证 -->
      <el-col :span="8">
        <i class="iconfont iconweibiaoti-_huabanfuben" style="color:#409eff"></i>
        <span>100%航协认证</span>
      </el-col>
      <!-- 出行保证 -->
      <el-col :span="8">
        <i class="iconfont iconbaozheng" style="color:green"></i>
        <span>出行保证</span>
      </el-col>
      <!-- 服务 -->
      <el-col :span="8">
        <i class="iconfont icondianhua" style="color:#409eff"></i>
        <span>7x24小时服务</span>
      </el-col>
    </el-row>

    <!-- 4.特价机票 -->
    <h2 class="air-sale-title">
      <i class="iconfont icontejiajipiao"></i>
      <span>特价机票</span>
    </h2>

    <!-- 5.四列特价机票 -->
    <div class="air-sale">
      <el-row type="flex" class="air-sale-pic" justify="space-between">
        <el-col :span="6" v-for="(item,index) in sales" :key="index">
          <nuxt-link
            :to="`/air/flights?departCity=${item.departCity}&departCode=${item.departCode}&destCity=${item.destCity}&destCode=${item.destCode}&departDate=${item.departDate}`"
          >
            <img :src="$axios.defaults.baseURL+item.cover" />
            <el-row class="layer-bar" type="flex" justify="space-between">
              <span>{{item.departCity}}-{{item.destCity}}</span>
              <span>￥{{item.price}}</span>
            </el-row>
          </nuxt-link>
        </el-col>
      </el-row>
    </div>
  </section>
</template>

<script>
//1.引入机票搜索表单组件
import searchPage from "@/components/air/searchPage";
export default {
  components: {
    searchPage
  },
  data() {
    return {
      //特价机票数组
      sales: []
    };
  },
  //创建后生命周期
  created() {
    //API接口: 推荐机票
    this.$axios({
      url: "/airs/sale"
    }).then(res => {
      console.log(res.data);
      this.sales = res.data.data;
    });
  }
};
</script>

<style lang="less" scoped>
//容器
.container {
  width: 1000px;
  margin: 0 auto;
  //1.国内机票
  .air-title {
    margin: 15px 0;
    font-size: 20px;
    font-weight: normal;
    color: orange;
    .iconfeiji {
      font-size: 20px;
    }
  }
  //2.机票搜索
  .sale-banner {
    img {
    }
  }
  //3.航协
  .statement {
    margin: 15px 0;
    border: 1px solid #ddd;
    background: #f5f5f5;
    height: 58px;
    padding: 10px 0;
    box-sizing: border-box;
    > div {
      text-align: center;
      line-height: 38px;
      border-right: 1px solid #ddd;
      &:last-child {
        border-right: none;
      }
      * {
        vertical-align: middle;
      }
      i {
        font-size: 30px;
      }
    }
  }
  //4.特价机票
  .air-sale-title {
    margin: 15px 0;
    font-size: 20px;
    font-weight: normal;
    color: #3f9dff;
    .icontejiajipiao {
      font-size: 20px;
    }
  }
  //5.四列特价机票
  .air-sale {
    .air-sale-pic {
      .el-col {
        a {
          img {
          }
          .layer-bar {
            span {
            }
          }
        }
      }
    }
  }
}
//elm隐藏类名
.air-sale {
  border: 1px solid #ddd;
  padding: 20px;
  margin-bottom: 50px;
  .air-sale-pic {
    > div {
      width: 225px;
      height: 140px;
      position: relative;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    .layer-bar {
      position: absolute;
      left: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      height: 30px;
      line-height: 30px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 15px;
      font-size: 14px;

      span:last-child {
        font-size: 18px;
      }
    }
  }
}
</style>